<template>
  <el-dialog :visible.sync="visible" :show-close="false" width="600px" :modal="true"
             :close-on-click-modal="false"
             :close-on-press-escape="false">
    <h2 slot="title">查询查复</h2>
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal">
      <i class="el-dialog__close el-icon el-icon-close"></i></button>
    <el-form class="form-wrapper" ref="orderForm" :model="orderForm" label-width="110px">
      <el-col :span="24">
        <el-form-item label="查询查复原因：" prop="queryReason">
          <el-input type="textarea" v-model="orderForm.queryReason" style="width: 90%" rows="4" maxlength="64"
                    show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="父组件传值:" prop="tradeCode">
          <el-input type="text"  v-model="parentmsg.tradeCode" style="width: 90%" rows="4" maxlength="64"
                    show-word-limit></el-input>
        </el-form-item>
      </el-col>
      <!--操作按钮-->
      <div class="opt-btn" style="float: right;">
        <el-button type="primary" @click="hello">提交</el-button>
        <el-button type="primary" @click="closeWin">关闭1111</el-button>
      </div>
    </el-form>
    <div>
      <!--查询查复历史列表部分-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180"></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      //可以直接用空对象接收： 其实已经全部接收到了
      parentmsg:{
        tradeCode:''
      }
    },
    data(){
      return {
        orderForm: {
          parentmsg:'',
          queryReason:''
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      hello() {
        console.log('parentmsg: '+this.parentmsg);
        this.orderForm.parentmsg =  this.parentmsg
        console.log('orderForm: ' + this.orderForm.queryReason + " - " + this.orderForm.parentmsg)
        this.$message("哈哈")
        this.$emit('update:visible', false);
      },
      closeWin() {
        // this.$message("关闭")
        this.$confirm('确定要关闭吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$emit('update:visible', false);
          this.message({
            type:'success',
            message:'关闭成功'
          }
          ).catch(()=>{
            this.$message({
              type: 'info',
              message: '已取消关闭'
            })
          })
        })

      },
      initForm(){
        this.orderForm = {
          queryReason: '',
          tradeCode:''
        };
        if(this.$refs.orderForm){
          this.$refs.orderForm.resetFields();
        }
      },
      cancelModal(){
        // 关闭弹窗，触发父组件修改visible值
        this.$emit('update:visible', false);
      },

    }
  }
</script>
<style scoped>
   .el-button  {
      margin-right: 20px;
      min-width: 100px;
  }
</style>
